<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* [CSS语法的注释方式,在style标签中的内容为CSS格式的 因此需要用CSS格式的注释] */
        /* 1.标签名选择器:全选指定类的标签进行设置 */
        h4 {
            color: red;
        }

        div {
            width: 120px;
            height: 120px;
            background-color: cyan;
        }

        /* 2.ID选择器 用#表示元素名为自定义id属性值 */
        #div2 {
            color: red;
        }

        /* 3.类选择器 格式为.class属性值 + {} 注意 "."和属性值之间不能有空格 */
        .error {
            background-color: red;
        }

        .success {
            background-color: green;
        }

        /* 4.伪类选择器(选中的是状态 此处选中的是悬停状态) :hover为固定写法 hover: 悬停状态 表示鼠标悬停在目标区域内 规定的格式才会生效 与关系 只有同时满足条件配置才会生效 */
        #div2:hover {
            background-color: deeppink;
        }

        /* 5.群组选择器 只要属于其中的一种就会被选中生效 或关系 */
        #div2, h4, .error {
            text-decoration: underline;
        }

        /* 6.通配选择器 *: 通配符 font: 字体 italic: 斜体 */
        * {
            font-style: italic;
        }

        /* 4.1 a标签的伪类固定顺序: :link :visited :hover :active */
        /* link: 网址从未被成功访问过 */
        a:link {
            color: gray;
        }

        /* visited: 网页被成功访问过且在浏览器中有记录 */
        a:visited {
            color: green;
        }

        /* hover: 鼠标悬停在内容上时配置会生效 */
        a:hover {
            color: red;
        }

        /* active: 选中链接激活时的状态 即鼠标点下去时该字段的状态 */
        a:active {
            color: orange;
        }

        /* 7.属性选择器 提高精确度可以将input也加上 二者之间是"与"关系 */
        input[type="text"] {
            background-color: yellow;
        }
        /*
        8.关系型选择器
            8.1 后代选择器
                其中 #d1和span之间的空格表示选中`#d1`中的所有`span`
                magenta: 品红色
            即选中包含在内的所有后代元素,子元素,孙元素...
            8.2 子代选择器
                其中 #d1>div>span 表示#d1中的div中的所有span
            关键字: 大于号
            选中本元素的直接子元素 可以逐级向下写多层
        */
        /* 8.1 后代选择器 */
        #d1 span {
            background-color: magenta;
        }
        /* 8.2 子代选择器 */
        #d1>div>span {
            color: yellow;
        }
    </style>
</head>
<body>
<h4>我是标题</h4>
<p>我是段落</p>
<a href="#">我是超链接</a>
<h4>我是标题</h4>
<div>我是div1</div>
<!--若不想使用行内样式 而是内部样式 需要给id属性赋值-->
<div id="div2">我是div2</div>
<div>我是div3</div>

<hr>

<!-- 3.1 提示错误信息 -->
<span class="error">用户名已被占用</span>
<span class="error">操作失败</span>
<br>
<!-- 3.2 提示正确信息 -->
<span class="success">有效的用户名格式</span>
<span class="success">操作成功</span>

<hr>

<a href="https://baidu.com">百度首页</a>
<a href="abc">错误地址</a>

<hr>

<input type="text">
<input type="password">

<hr>

<div id="d1">
    <span>1</span>
    <div>
        <span>2</span>
        <b>加粗文本(测试用)</b>
    </div>
    <span>3</span>
</div>
</body>
</html>